Traduction avec IA intégrée

Thomas Steiner

Alexandra Klepper

Publié le 13 novembre 2024, dernière mise à jour le 20 mai 2025

Vidéo explicative	Web	Extensions	État de Chrome	Intent
MDN	Chrome 138 bêta	Chrome 138 bêta	Afficher	Intent to Experiment

Utilisez l'API Translator dans Chrome pour traduire du texte à l'aide des modèles d'IA fournis dans le navigateur.

Il est possible que votre site Web propose déjà du contenu dans plusieurs langues pour le rendre accessible à une audience mondiale. Avec l'API Translator, les utilisateurs peuvent contribuer dans leur langue maternelle. Par exemple, les utilisateurs peuvent participer aux chats d'assistance dans leur langue maternelle, et votre site peut les traduire dans la langue utilisée par vos agents d'assistance avant qu'ils ne quittent l'appareil de l'utilisateur. Vous créez ainsi une expérience fluide, rapide et inclusive pour tous les utilisateurs.

La traduction de contenu sur le Web nécessitait généralement l'utilisation d'un service cloud. Tout d'abord, le contenu source est importé sur un serveur, qui effectue la traduction dans une langue cible, puis le texte obtenu est téléchargé et renvoyé à l'utilisateur. En exécutant la traduction sur le client, vous économisez le temps requis par les aller-retours vers le serveur et le coût d'hébergement du service de traduction.

Commencer

L'API Translator est disponible à partir de la version stable 138 de Chrome. Commencez par exécuter la détection des fonctionnalités pour voir si le navigateur est compatible avec l'API Traducteur.

if ('Translator' in self) {
  // The Translator API is supported.
}

Vous connaissez toujours la langue cible des traductions, mais vous ne connaissez pas toujours la langue source. Dans ce cas, vous pouvez utiliser l'API Language Detector.

Vérifier la prise en charge des combinaisons linguistiques

La traduction est gérée à l'aide de modules linguistiques, téléchargés à la demande. Un pack de langues est comme un dictionnaire pour une langue donnée.

• sourceLanguage: langue actuelle du texte.
• targetLanguage: langue finale dans laquelle le texte doit être traduit.

Utilisez les codes courts de langue BCP-47 comme chaînes. Par exemple, 'es' pour l'espagnol ou 'fr' pour le français.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

La fonction availability() renvoie une promesse avec les valeurs suivantes:

• "unavailable": l'implémentation n'est pas compatible avec la traduction ni la détection de langue des langues indiquées.
• "downloadable": l'implémentation prend en charge la traduction ou la détection de la langue des langues données, mais un téléchargement est nécessaire pour continuer. Le téléchargement peut être le modèle du navigateur.
• "downloading": l'implémentation prend en charge la traduction ou la détection de la langue des langues indiquées. Le navigateur termine un téléchargement en cours, dans le cadre de la création de l'objet associé.
• "available": l'implémentation prend en charge la traduction ou la détection de la langue des langues indiquées, et tous les téléchargements requis sont déjà terminés.

Écoutez la progression du téléchargement du modèle avec l'événement downloadprogress:

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Si le téléchargement échoue, les événements downloadprogress s'arrêtent et la promesse ready est rejetée.

Créer et exécuter le traducteur

Pour créer un traducteur, appelez la fonction create() asynchrone. Il nécessite un paramètre d'options avec deux champs, l'un pour sourceLanguage et l'autre pour targetLanguage.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

Une fois que vous avez un traducteur, appelez translate() asynchrone.

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

Traductions séquentielles

Les traductions sont traitées de manière séquentielle. Si vous envoyez de grandes quantités de texte à traduire, les traductions ultérieures sont bloquées jusqu'à ce que les premières soient terminées.

Pour obtenir la meilleure réponse à vos requêtes, regroupez-les et ajoutez une interface de chargement, comme une icône de chargement, pour indiquer que la traduction est en cours.

Démo

Vous pouvez consulter l'API Translator, utilisée en combinaison avec l'API Language Detector, dans l'espace de jeu de l'API Translator et Language Detector.

Effort de standardisation

Nous nous efforçons de normaliser l'API Translator afin de garantir la compatibilité entre les navigateurs.

Notre proposition d'API a reçu l'approbation de la communauté et a été transférée au groupe de la communauté W3C Web Incubator pour une discussion plus approfondie. L'équipe Chrome a demandé des commentaires au Groupe d'architecture technique du W3C et à Mozilla et WebKit pour connaître leur position sur les normes.

Vous pouvez participer à l'élaboration des normes en rejoignant le groupe de la communauté Web Incubator.

Envoyer des commentaires

Nous souhaitons découvrir ce que vous créez avec l'API Language Detector. Partagez vos sites Web et applications Web avec nous sur X, YouTube et LinkedIn.

Pour envoyer des commentaires sur l'implémentation de Chrome, envoyez un rapport de bug ou une demande de fonctionnalité.